<!DOCTYPE html>
<html>

<head>
    <title>Terminalizer Render</title>
    <meta charset="UTF-8">

</head>

<body>
    <h1>Terminalizer Render</h1>

    <input type="file" id="fileInput" accept=".yml, .yaml"/>
    <input type="button" value="上传文件" onclick="uploadFile()" />

    <div id="responseDiv" style="height:20vh;overflow-y: scroll;"></div>

    <script>
        function uploadFile() {
            var fileInput = document.getElementById("fileInput");
            var file = fileInput.files[0];

            var reader = new FileReader();
            reader.onload = function (e) {
                var fileContent = e.target.result;
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/render", true);
                xhr.onreadystatechange = function () {
                    var response = xhr.responseText;
                    // 在responseDiv中显示每条信息
                    var responseDiv = document.getElementById("responseDiv");
                    response=response.replace(/\n/g, "<br>");
                    responseDiv.innerHTML = response;
                    responseDiv.scrollTop=responseDiv.scrollHeight;
                };
                xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
                xhr.send(fileContent);
            };
            reader.readAsText(file, "UTF-8");
        }
    </script>
</body>

</html>